import React, { Component } from 'react';
import { Card, Button, List, Form, InputNumber, Col, Row, Input, Icon, Modal } from 'antd';
import { connect } from 'dva';
import { Stage, Layer, Text, Image } from 'react-konva';
import { formatMessage } from 'umi/locale';
import ImageJointParamsForm from './hdForms/ImageJointParamsForm';
import LineCameraParamsForm from './hdForms/LineCameraParamsForm';

@connect(({ cj }) => ({ cj }))
class LineCameraJointImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.cj.jointImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.cj.jointImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={1000} height={1000} />;
  }
}

@connect(({ cj }) => ({ cj }))
class CountBoardSizeImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.cj.countWidthHeightImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.cj.countWidthHeightImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={800} height={850} />;
  }
}

@connect(({ cj }) => ({ cj }))
class CheckSizeImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.cj.checkSizeImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.cj.checkSizeImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={800} height={850} />;
  }
}

@connect(({ cj, ds }) => ({ cj, ds }))
@Form.create({})
class LineCameraJoint extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    movePix: 0, // 图像拼接的时候移动的像素数
    inputWidth: 0, // 录入的物料尺寸宽
    inputHeight: 0, // 录入的物料尺寸高
  };

  saveTotalBoardSize = e => {
    const { dispatch } = this.props;
    const { inputWidth, inputHeight } = this.state;
    dispatch({
      type: 'cj/saveTotalBoardSize',
      payload: [inputWidth, inputHeight],
    });
  };

  reGetImageForImageJoint = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/reGetImageForImageJoint',
    });
  };

  getImageForImageJoint = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getImageForImageJoint',
    });
  };

  // testFunction = e => {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'cj/testFunction'
  //   });
  // }

  startCamZmc = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/startCamZmc',
    });
  };
  stopCamZmc = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/stopCamZmc',
    });
  };
  resetCamZmc = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/resetCamZmc',
    });
  };
  openImageJointDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/openImageJointDir',
    });
  };

  moveToOut = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, -movePix, -movePix, 0, 0, 0, 0, 0],
    });
  };
  moveToInner = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, movePix, movePix, 0, 0, 0, 0, 0],
    });
  };

  moveLeftUp = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, 0, 0, 0, -movePix, 0],
    });
  };

  moveLeftDown = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, 0, 0, 0, movePix, 0],
    });
  };
  moveToOutRight = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, -movePix, -movePix, 0, 0, 0],
    });
  };
  moveToInnerRight = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, movePix, movePix, 0, 0, 0],
    });
  };

  moveRightUp = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, 0, 0, 0, 0, -movePix],
    });
  };

  moveRightDown = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, 0, 0, 0, 0, movePix],
    });
  };

  moveLeftMatter = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [movePix, 0, 0, 0, 0, 0, 0, 0],
    });
  };

  moveRightMatter = e => {
    const { dispatch } = this.props;
    const { movePix } = this.state;
    dispatch({
      type: 'cj/clearJointImageSrc',
    });
    dispatch({
      type: 'cj/getMoveJointImage',
      payload: [0, 0, 0, 0, 0, movePix, 0, 0],
    });
  };

  countBoardSize = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardSizeImageSrc',
    });
    dispatch({
      type: 'cj/countBoardSize',
    });
  };

  closeImageShowModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardSizeImageSrc',
    });
  };

  closeImageCheckModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardCheckImageSrc',
    });
  };

  totalBoardIsOk = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardSizeImageSrc',
    });
    dispatch({
      type: 'cj/totalBoardIsOk',
    });
  };

  totalBoardIsError = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardSizeImageSrc',
    });
    dispatch({
      type: 'cj/totalBoardIsError',
    });
  };

  calcMmToPix = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/calcMmToPix',
      payload: [],
    });
  };
  saveMmToPix = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/saveMmToPix',
    });
  };

  checkMmToPix = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/checkMmToPix',
    });
  };

  openCountBoardSizeDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/openCountBoardSizeDir',
    });
  };

  checkSizeOk = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardCheckImageSrc',
    });
    dispatch({
      type: 'cj/checkSizeOk',
    });
  };

  checkSizeError = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardCheckImageSrc',
    });
    dispatch({
      type: 'cj/checkSizeError',
    });
  };

  calcCheckError = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/clearBoardCheckImageSrc',
    });
    dispatch({
      type: 'cj/calcCheckError',
    });
  };

  getEightImageForCount = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/getEightImageForCount',
    });
  };

  closeCamZmcDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cj/closeCamZmcDoorAlarm',
    });
  };

  render() {
    const {
      jointImageSrc,
      imageJointParams,
      configParams,
      imageShowModalVisble,
      countWidthHeightImageSrc,
      boardSize,
      showInfo,
      imageCheckModalVisble,
      checkSizeImageSrc,
      checkSize,
      checkInfo,
      inputSize,
      checkError,
    } = this.props.cj;

    const { camZmcStates } = this.props.ds;

    const { getFieldDecorator, getFieldsValue } = this.props.form;
    const { movePix } = this.state;
    return (
      <>
        <Card title="相机参数设置">
          <LineCameraParamsForm configParams={configParams} />
        </Card>
        <Card>
          <Card.Grid style={{ width: '55%', textAlign: 'left' }}>
            <Stage width={1000} height={1000}>
              <Layer>
                {jointImageSrc ? <LineCameraJointImage width={1000} /> : <Image width={1000} />}
              </Layer>
            </Stage>
          </Card.Grid>
          <Card.Grid style={{ width: '45%', textAlign: 'left' }}>
            <Col>
              <Row>
                <span style={{ marginLeft: 15 }}>
                  状态:&nbsp;&nbsp;&nbsp;{' '}
                  {camZmcStates.rs ? (
                    <font style={{ color: '#FF0000', fontSize: 16 }}>急停中</font>
                  ) : camZmcStates.run ? (
                    <font style={{ color: '#00FF00', fontSize: 16 }}>运行中</font>
                  ) : (
                    <font style={{ color: '#112233', fontSize: 16 }}>待机</font>
                  )}
                </span>
                <Button
                  onClick={this.startCamZmc}
                  style={{ marginLeft: 15 }}
                  disabled={camZmcStates.run || camZmcStates.rs}
                >
                  上料启动
                </Button>
                <Button
                  onClick={this.stopCamZmc}
                  style={{ marginLeft: 15 }}
                  disabled={!camZmcStates.run || camZmcStates.rs}
                >
                  上料停止
                </Button>
                <Button
                  onClick={this.resetCamZmc}
                  style={{ marginLeft: 15 }}
                  disabled={camZmcStates.run}
                >
                  上料复位
                </Button>
                <Button
                  onClick={this.closeCamZmcDoorAlarm}
                  style={{ marginLeft: 15 }}
                  disabled={camZmcStates.run}
                >
                  屏蔽上料门报警
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button
                  onClick={this.getImageForImageJoint}
                  style={{ marginLeft: 15 }}
                  disabled={!camZmcStates.run}
                >
                  抓取图片
                </Button>
                <Button
                  onClick={this.reGetImageForImageJoint}
                  style={{ marginLeft: 15 }}
                  disabled={!camZmcStates.run}
                >
                  重新拍照
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.openImageJointDir} style={{ marginLeft: 15 }}>
                  查看拼接图片
                </Button>
                {/* <Button onClick={this.testFunction} style={{ marginLeft: 15 }}>
                  测试
                </Button> */}
              </Row>
              <Row style={{ marginTop: 20 }}>
                <ImageJointParamsForm imageJointParams={imageJointParams} />
              </Row>
              <Row style={{ marginTop: 20 }}>
                <span style={{ width: 150, marginLeft: 10 }}>移动的像素数(只能是整数)</span>
                <InputNumber
                  onChange={value => this.setState({ movePix: value })}
                  style={{ marginLeft: 10, width: 80 }}
                  defaultValue={movePix}
                />
              </Row>
              <Row style={{ marginTop: 20 }}>
                <p>
                  左边图像拼接移动的时候,左边和中间的图像会同时移动相同的像素数,上下移动的时候,中间图不变,移动左侧图像
                </p>
                <Button onClick={this.moveToInner}>
                  <Icon type="vertical-left" />
                  <Icon type="vertical-right" />
                </Button>
                <Button onClick={this.moveToOut} style={{ marginLeft: 20 }}>
                  <Icon type="left" />
                  <Icon type="right" />
                </Button>
                <Button onClick={this.moveLeftUp} style={{ marginLeft: 20 }}>
                  <Icon type="vertical-align-top" />
                </Button>
                <Button onClick={this.moveLeftDown} style={{ marginLeft: 20 }}>
                  <Icon type="vertical-align-bottom" />
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <p>
                  右边图像拼接移动的时候,右边和中间的图像会同时移动相同的像素数,上下移动的时候,中间图不变,移动右侧图像
                </p>
                <Button onClick={this.moveToInnerRight}>
                  <Icon type="vertical-left" />
                  <Icon type="vertical-right" />
                </Button>
                <Button onClick={this.moveToOutRight} style={{ marginLeft: 20 }}>
                  <Icon type="left" />
                  <Icon type="right" />
                </Button>
                <Button onClick={this.moveRightUp} style={{ marginLeft: 20 }}>
                  <Icon type="vertical-align-top" />
                </Button>
                <Button onClick={this.moveRightDown} style={{ marginLeft: 20 }}>
                  <Icon type="vertical-align-bottom" />
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <p>截取左右的型材,输入截掉的像素数进行截取,负数可以补回截掉的部分</p>
                <Button onClick={this.moveLeftMatter}>截掉左边型材</Button>
                <Button onClick={this.moveRightMatter} style={{ marginLeft: 20 }}>
                  截掉右边型材
                </Button>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <p>
                  <font style={{ color: '#FF0000', fontSize: 13 }}>
                    像素比高宽比计算(图像拼接完成以后做这一步,先录入物料尺寸(mm))
                  </font>
                </p>
                <span>拍摄物料宽:</span>
                <Input
                  onChange={e => this.setState({ inputWidth: e.target.value })}
                  style={{ marginLeft: 10, width: 80 }}
                />
                <span style={{ marginLeft: 10 }}>拍摄物料高:</span>
                <Input
                  onChange={e => this.setState({ inputHeight: e.target.value })}
                  style={{ marginLeft: 10, marginRight: 10, width: 80 }}
                />
                <Button stye={{ marginLeft: 20 }} onClick={this.saveTotalBoardSize}>
                  保存
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.getEightImageForCount}>拍8张图用于统计</Button>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.countBoardSize}>计算高宽比和像素比</Button>
                <Button style={{ marginLeft: 20 }} onClick={this.checkMmToPix}>
                  验证高宽比和像素比
                </Button>
              </Row>
            </Col>
          </Card.Grid>
        </Card>
        <Modal
          title={'物料区域尺寸识别是否正确确认框'}
          visible={imageShowModalVisble}
          width={window.screen.availWidth - 80}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          closable={false}
          footer={null}
          closable={true}
          onCancel={this.closeImageShowModal}
        >
          <Card>
            <Card>
              <Card.Grid style={{ width: '62%', textAlign: 'left' }}>
                <Stage width={800} height={850}>
                  <Layer>
                    {countWidthHeightImageSrc ? <CountBoardSizeImage /> : <Image width={800} />}
                  </Layer>
                </Stage>
              </Card.Grid>
              <Card.Grid style={{ width: '38%', textAlign: 'left' }}>
                <Col>
                  <Row>
                    <p>
                      <font style={{ color: '#FF0000', fontSize: 13 }}>
                        如果画的物料区域的框是对的就点击OK按钮,如果物料查找有偏差,就点击Error按钮
                      </font>
                    </p>
                    <p>
                      计算尺寸(pix): (宽,高) =({boardSize[0]},&nbsp;{boardSize[1]})
                    </p>
                    <p>
                      录入尺寸(mm): (宽,高) =({inputSize[0]},&nbsp;{inputSize[1]})
                    </p>
                    <Button type="primary" onClick={this.totalBoardIsOk}>
                      物料查找OK
                    </Button>
                    <Button
                      style={{ marginLeft: 20 }}
                      type="primary"
                      onClick={this.totalBoardIsError}
                    >
                      物料查找Error
                    </Button>
                    <Button style={{ marginLeft: 30 }} type="primary" onClick={this.calcMmToPix}>
                      计算像素比
                    </Button>
                    <Button style={{ marginLeft: 20 }} type="primary" onClick={this.saveMmToPix}>
                      保存
                    </Button>
                    <Button
                      style={{ marginLeft: 10 }}
                      type="primary"
                      onClick={this.openCountBoardSizeDir}
                    >
                      查看图像目录
                    </Button>
                  </Row>
                  <Row style={{ marginTop: 20 }}>
                    <p style={{ marginTop: 20 }}>
                      <font style={{ color: '#FF0000' }}>提示消息:</font>
                      <span style={{ marginLeft: 10 }}>{showInfo}</span>
                    </p>
                  </Row>
                </Col>
              </Card.Grid>
            </Card>
          </Card>
        </Modal>

        <Modal
          title={'物料区域尺寸识别是否正确确认框'}
          visible={imageCheckModalVisble}
          width={window.screen.availWidth - 80}
          style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
          closable={false}
          footer={null}
          closable={true}
          onCancel={this.closeImageCheckModal}
        >
          <Card>
            <Card>
              <Card.Grid style={{ width: '62%', textAlign: 'left' }}>
                <Stage width={800} height={850}>
                  <Layer>{checkSizeImageSrc ? <CheckSizeImage /> : <Image width={800} />}</Layer>
                </Stage>
              </Card.Grid>
              <Card.Grid style={{ width: '38%', textAlign: 'left' }}>
                <Col>
                  <Row>
                    <p>
                      <font style={{ color: '#FF0000' }}>
                        如果画的物料区域的框是对的就点击OK按钮,如果物料查找有偏差,就点击Error按钮
                      </font>
                    </p>
                    <p>
                      计算尺寸(mm): (宽,高) =({checkSize[0]},&nbsp;{checkSize[1]})
                    </p>
                    <p>
                      录入尺寸(mm): (宽,高) =({inputSize[0]},&nbsp;{inputSize[1]})
                    </p>
                    <p>
                      识别误差(mm): (宽,高) = ({checkError[0]},&nbsp;{checkError[1]})
                    </p>
                    <Button type="primary" onClick={this.checkSizeOk}>
                      物料查找OK
                    </Button>
                    <Button style={{ marginLeft: 20 }} type="primary" onClick={this.checkSizeError}>
                      物料查找Error
                    </Button>
                    <Button style={{ marginLeft: 20 }} type="primary" onClick={this.calcCheckError}>
                      计算平均误差
                    </Button>
                    <Button
                      style={{ marginLeft: 10 }}
                      type="primary"
                      onClick={this.openCountBoardSizeDir}
                    >
                      查看图像目录
                    </Button>
                  </Row>
                  <Row style={{ marginTop: 20 }}>
                    <p style={{ marginTop: 20 }}>
                      <font style={{ color: '#FF0000' }}>提示消息:</font>
                      <span style={{ marginLeft: 10 }}>{checkInfo}</span>
                    </p>
                  </Row>
                </Col>
              </Card.Grid>
            </Card>
          </Card>
        </Modal>
      </>
    );
  }
}
export default LineCameraJoint;
